A dual color clickable filled range Line chart

By using the Poly drawing API object with a filled range chart you can make the filled range clickable.

This goes in the documents header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.drawing.poly.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [
                [3,4,6,5,2,4,5,5,6,8,7,4,8,9,8,6,5,2,5,4],
                [12,13,15,16,12,13,15,14,21,22,20,13,15,16,18,19,16,15,13,18]
            ],
            options: {
                filled: true,
                filledRange: true,
                fillstyle: 'red',
                colors: ['black'],
                linewidth: 1,
                numxticks: 19,
                ymax: 50,
                tickmarks: null,
                backgroundGridAutofitNumvlines: 19,
                textAccessible: true,
                scaleZerostart: true
            }
        }).trace(null, drawPoly);


        function drawPoly ()
        {
            /**
            * Extract the coords from the Line chart coords
            */
            var coords = [];
            for (var i=0; i<(line.coords.length / 2); i+=1) {
                coords.push(line.coords[i]);
            }

            for (var i=(line.coords.length - 1); i>=(line.coords.length / 2);i-=1) {
                coords.push(line.coords[i]);
            }

            var poly = new RGraph.Drawing.Poly({
                id: 'cvs',
                coords: coords,
                options: {
                    strokestyle: 'rgba(0,0,0,0)',
                    fillstyle: 'rgba(0,0,0,0)',
                    tooltips: ['The tooltip!'],
                    highlightFill: 'rgba(255,255,255,0.5)'
                }
            }).draw();
        }
    };
</script>